<template>
  <div class="pagePersonalCenter">
    <headerT title="评价" />
    <div class="headMarginTop pagesMain">
      <div class="boxBg">
        <div class="evaluationTitle">点评该商品</div>
        <div class="everyBlockBgcolor evaluationMainBox">
          <div class="evaluationMainTopBox">
            <div class="evaluationMainTitle">写下你的点评</div>
            <div class="evaluationMainInput">
              <textarea cols="3" maxlength="50" placeholder="字数在50字以内…" v-model="comment_content"></textarea>
            </div>

            <div class="displayFlex uploadBox">
              <div class="imgBox" v-for="(item,index) in imgArr" :key="index">
                <img :src="item" class="pictrue" />
                <img
                  src="../../../static/images/icoN-close.png"
                  @click="delImg(item)"
                  class="iconClose"
                />
              </div>
              <form v-if="imgArr.length<5" class="fileForm" enctype="multipart/form-data">
                <input
                  id="file"
                  type="file"
                  name="image"
                  @change="changeImgFun"
                  accept="image/*"
                  class="header-upload-btn"
                />
              </form>
            </div>
          </div>
          <div class="btnConfig" @click="evaluateGoods">
            <div>确认</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerT from "@/components/header";
import uploadPicture from "@/components/uploadPicture";
import { upload } from "@/services/personCenter";
import { goodComment } from "@/services/goods";

export default {
  name: "login",
  components: {
    headerT,
    uploadPicture
  },

  data() {
    return {
      imgArr: [], //上传图片数组
      good_id: 13, // 商品id
      comment_content: "", //商品评论内容
      comment_img: "" //商品评论图片，多图用逗号分隔
    };
  },
  created() {},
  mounted() {},
  methods: {
    changeImgFun(e) {
      //上传图片
      let formdata = new FormData();
      formdata.append("file[]", $("#file")[0].files[0]);
      this.$vux.loading.show({
        text: "Loading"
      });
      this.$post(upload, formdata)
        .then(res => {
          this.$vux.loading.hide();
          this.imgArr.push(res.data[0]);
          $("#file").val("");
        })
        .catch(err => {
          this.$vux.loading.hide();
        });
    },
    delImg(item) {
      //删除图片方法
      this.removeImg(this.imgArr, item);
    },
    removeImg(arr, val) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] == val) {
          arr.splice(i, 1);
        }
      }
      return -1;
    },

    // 确定
    evaluateGoods() {
      let picUrl = "";
      if (this.imgArr.length) {
        this.imgArr.forEach(item => {
          picUrl = picUrl ? item + "," + picUrl : item;
        });
      }
      let param = {
        good_id: this.good_id,
        comment_content: this.comment_content,
        comment_img: picUrl
      };

      this.$post(goodComment, param).then(res => {});
    }
  }
};
</script>

<style lang="less" rel="stylesheet/less" type="text/css" scoped>
.pagePersonalCenter {
  .pagesMain {
    width: 100%;
    height: 11.43rem;
    background-image: url("../../../static/images/evaluationBgRed.png");
    background-size: 100%;
    background-repeat: no-repeat;

    .boxBg {
      width: 100%;
      height: 11.43rem;
      background-image: url("../../../static/images/evaluationBgWhite.png");
      background-size: 100%;
      background-repeat: no-repeat;
      padding: 0 0.25rem;

      .evaluationTitle {
        font-size: 0.49rem;
        font-weight: bold;
        padding: 0.59rem 0 0.74rem 0;
        text-align: center;
        color: #ffffff;
        letter-spacing: 0.06rem;
      }

      .evaluationMainBox {
        border-radius: 0.14rem;
        padding: 0.37rem 0.49rem 0 0.52rem;

        .evaluationMainTopBox {
          .evaluationMainTitle {
            font-size: 0.39rem;
            font-weight: bold;
            color: #4e4e4e;
          }

          .evaluationMainInput {
            padding: 0.49rem 0 0.5rem 0;

            textarea {
              width: 100%;
              height: 1.6rem;
              outline: none;
              resize: none;
              border: none;
              & ::-webkit-input-placeholder {
                color: #c8c8c8;
              }
            }
          }

          .uploadBox {
            box-sizing: border-box;
            height: 1.5rem;
            margin: 0.15rem 0 0.69rem 0;
            .imgBox {
              height: 1.5rem;
              width: 1.5rem;
              margin-right: 0.3rem;
              position: relative;
              .pictrue {
                display: block;
                width: 100%;
                height: 100%;
              }
              .iconClose {
                position: absolute;
                right: -0.3rem;
                top: -0.25rem;
                width: 0.5rem;
              }
            }
            .imgBox:last-child {
              margin-right: 0;
            }

            .fileForm {
              height: 1.5rem;
              width: 1.5rem;
              background-image: url("../../../static/images/uploadImg2.png");
              background-size: 100%;
              background-repeat: no-repeat;
              .header-upload-btn {
                height: 1.5rem;
                width: 1.5rem;
                opacity: 0;
              }
            }
            .inputBox {
              width: 100%;
              height: 100%;
            }
          }
        }
        .btnConfig {
          height: 3.03rem;
          border-top: 1px solid #dfdfdf;
          div {
            margin: 0.65rem 0.32rem;
            height: 1.87rem;
            background-image: url("../../../static/images/evaluationBtnBg.png");
            background-size: 100%;
            background-repeat: no-repeat;
            text-align: center;
            line-height: 1.87rem;
            font-weight: bold;
            font-size: 0.37rem;
            color: #ffffff;
            letter-spacing: 0.08rem;
          }
        }
      }
    }
  }
}
</style>
